<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>{{ num }}</p>
    <button @click="num++">点击</button>
    <ul>
      <li v-for="(item,index) in list" :key="index">
        <img :src="item.img" alt="">
        <h1>{{item.name}}</h1>
        <p>{{item.num}}</p>
        <p>{{item.id}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      num: 0,
      list:[],
    };
  },
  // methods:{
  //   changeStr(){
  //     this.bus.$emit("namel","我要给它啦啦啦")
  //   }
  // }

  beforeCreate() {
    console.log("开始创建");
  },
  created()
  {
    console.log("创建完成");
  },
  beforeMount()
  {
    console.log("渲染之前");
  },
  mounted()
  {
    console.log("渲染之后");
    axios.get("/list").then((res) => {
      console.log(res);
      this.list=res.data;
    })
  },
  beforeUpdate()
  {
    console.log("数据更新之前");
  },
  updated()
  {
    console.log("数据更新之后");
  },
  activated()
  {
    console.log("被 keep-alive 缓存的组件激活时");
  },
  deactivated()
  {
    console.log("被 keep-alive 缓存的组件失活");
  },
  beforeDestroy()
  {
    console.log("实例销毁之前");
  },
  destroyed()
  {
    console.log("实例销毁之后");
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
